<template>
  <div class="user">
    <el-table
      :data="userdata"
      tooltip-effect="dark"
      style="width: 100%"
      border
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="username"
        label="用户名"
        align='center'
      >
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="电话"
        align='center'
      >
      </el-table-column>
      <el-table-column
        prop="isDelete"
        label="状态"
        align='center'
      >
      <!-- 插槽的使用，
      scope为获取当前端口的所有数据，数据类型为对象
      scope.row为获取当前行的所有数据
      如果要在模板中显示。则直接把获取到的数据直接赋值传递给函数
       -->
      <template slot-scope="scope">
        <span>{{scope.row.isDelete | statusFormat}}</span>
      </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align='center'
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            plain
            @move="handleEdit(scope.$index, scope.row)"
          >禁用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagenum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import {GetUserList} from '@/api'
export default {
  mounted () {
    this.init()
  },
  data () {
    return {
      userdata: [],
      total: 0,
      // 每页显示数
      pageSize: 10,
      // 当前页码
      pagenum: 1
    }
  },
  methods: {
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleEdit (index, row) {
      console.log(index, row)
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    // 获取用户数据
    init () {
      GetUserList({
        page: this.pagenum,
        pageSize: this.pageSize
      }).then(res => {
        console.log(res)
        if (res.status === 200) {
          this.userdata = res.data.rows
          this.total = res.data.total
        }
      })
    }
  },
  // 过滤器，把管道符前的参数传入到这个函数中进行逻辑的执行
  filters: {
    statusFormat (status) {
      if (status === 1) {
        return '已启用'
      } else if (status === 0) {
        return '禁用'
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
